import { useState } from "react";
import { EditableProTable } from "@ant-design/pro-components";
import { InputNumber, Button } from "antd";

export default ({
  name = "specificationRequests",
  storageDisabled = false,
  value = [],
  onChange,
}) => {
  const [editableKeys, setEditableRowKeys] = useState(
    value?.map((item) => item.id)
  );

  const columns = [
    {
      title: "名称",
      dataIndex: "specification",
      formItemProps: (form, { rowIndex }) => {
        return {
          rules: [
            { required: true, message: "此项为必填项" },
            {
              max: 100,
              message: "最长为100位",
            },
          ],
        };
      },
      width: "20%",
    },
    {
      title: "进货价",
      dataIndex: "costPrice",
      renderFormItem: () => {
        return (
          <InputNumber
            style={{ width: "100%" }}
            placeholder="请输入"
            precision={2}
            min={0}
            max={99999999}
          />
        );
      },
      formItemProps: (form, { rowIndex }) => {
        return {
          rules: [{ required: true, message: "此项为必填项" }],
        };
      },
      width: "20%",
    },
    {
      title: "库存",
      dataIndex: "inventory",
      renderFormItem: () => {
        return (
          <InputNumber
            disabled={storageDisabled}
            style={{ width: "100%" }}
            placeholder=""
            precision={0}
            min={0}
            max={99999999}
          />
        );
      },
      // formItemProps: (form, { rowIndex }) => {
      //   return {
      //     rules: [{ required: true, message: "此项为必填项" }],
      //   };
      // },
      width: "20%",
    },
    // {
    //   title: "商品编号",
    //   dataIndex: "commodityNum",
    //   formItemProps: (form, { rowIndex }) => {
    //     return {
    //       rules: [{ required: true, message: "此项为必填项" }],
    //     };
    //   },
    //   width: "20%",
    // },
    {
      title: "售价",
      dataIndex: "price",
      renderFormItem: () => {
        return (
          <InputNumber
            style={{ width: "100%" }}
            placeholder="请输入"
            precision={2}
            min={0}
            max={99999999}
          />
        );
      },
      formItemProps: (form, { rowIndex }) => {
        return {
          rules: [{ required: true, message: "此项为必填项" }],
        };
      },
      width: "20%",
    },
    {
      title: "VIP价格",
      dataIndex: "vipPrice",
      renderFormItem: () => {
        return (
          <InputNumber
            style={{ width: "100%" }}
            placeholder="请输入"
            precision={2}
            min={0}
            max={99999999}
          />
        );
      },
      formItemProps: (form, { rowIndex }) => {
        return {
          rules: [{ required: true, message: "此项为必填项" }],
        };
      },
      width: "20%",
    },

    {
      title: "重量KG",
      dataIndex: "weight",
      renderFormItem: () => {
        return (
          <InputNumber
            style={{ width: "100%" }}
            placeholder="请输入"
            precision={2}
            min={0}
            max={99999999}
          />
        );
      },
      formItemProps: (form, { rowIndex }) => {
        return {
          rules: [{ required: true, message: "此项为必填项" }],
        };
      },
      width: "20%",
    },
    {
      title: "体积m³",
      dataIndex: "volume",
      renderFormItem: () => {
        return (
          <InputNumber
            style={{ width: "100%" }}
            placeholder="请输入"
            precision={2}
            min={0}
            max={99999999}
          />
        );
      },
      formItemProps: (form, { rowIndex }) => {
        return {
          rules: [{ required: true, message: "此项为必填项" }],
        };
      },
      width: "20%",
    },

    {
      title: "操作",
      valueType: "option",
      width: 100,
      render: (text, record, _, action) => [
        <a
          key="editable"
          onClick={() => {
            action?.startEditable?.(record.id);
          }}
        >
          编辑
        </a>,
        <a
          key="delete"
          onClick={() => {
            onChange(value.filter((item) => item.id !== record.id));
          }}
        >
          删除
        </a>,
      ],
    },
  ];

  return (
    <EditableProTable
      name={name}
      rowKey="id"
      recordCreatorProps={{
        position: "bottom",
        record: () => ({ id: Date.now() }),
        creatorButtonText: "新增一行",
      }}
      loading={false}
      columns={columns}
      value={value}
      onChange={onChange}
      editable={{
        type: "multiple",
        editableKeys,
        onValuesChange: (record, recordList) => {
          onChange(recordList);
        },
        onChange: setEditableRowKeys,
        actionRender: (row, config, defaultDom) => [defaultDom.delete],
      }}
    />
  );
};
